<template>
    <div>
        <p>{{ name }}</p>
        <!-- 第一种方式 -->
        <!-- <Student @myevent="getMsg" /> -->
        <!-- <Student v-on:myevent="getMsg" /> -->

        <!-- 第二种方式 -->
        <Student ref="stu" />
    </div>
</template>

<script>
import Student from "./Student.vue";
export default {
    name: "School",
    components: {
        Student,
    },
    data() {
        return {
            name: "白菜中学",
        };
    },
    //   methods: {
    //     getMsg(data) {
    //       this.name = data;
    //     },
    //   },
    mounted() {
        //   这种不在methods中定义，而是在绑定时候写的回调一定要写出箭头函数
        this.$refs.stu.$on("myevent", (data) => {
            this.name = data;
        });
    },
};
</script>

<style></style>
